<template>
	<view class="container">		
		<tablist :data="tabList" :index="tabIndex" @result="tabResult"></tablist>
		
		<template v-if="tabIndex == 0">
			<map class="map_cont" scale="9" :latitude="coordinate.latitude" :longitude="coordinate.longitude" 
			:markers="coordinate.covers" @markertap="markerClick"></map>
		
			<cover-view class="cover_header">
				<cover-view class="map_search uni-flex" @click="goPage('list', '')">
					<cover-image class="map_search_icon" :src="apiUrl + 'images/icon/search.png'" @click="goPage('list', '')"></cover-image>
					<cover-view class="map_search_input text-gray9 m-l10" @click="goPage('list', '')">输入小区名称</cover-view>
					<cover-view class="map_search_btn text-blue" @click="goPage('list', '')">搜索</cover-view> 
				</cover-view>
			</cover-view>
			
			<cover-view class="cover_footer p-b20">
				<cover-view class="uni-flex justify-space-between">
					<cover-view class="total bg-white fs12 text-blue">附近有{{coordinate.total || 0}}个工地</cover-view>
					
					<cover-view class="map_tab bg-white uni-flex justify-space-between fs12">
						<cover-view class="map_tab_item bg-blue round-40 uni-flex justify-left">
							<cover-image class="map_search_icon1" :src="apiUrl + 'images/icon/map_2.png'"></cover-image>
							<cover-view class="map_tab_label text-white">地图</cover-view>
						</cover-view>
						<cover-view class="map_tab_item uni-flex justify-left" @click="goPage('list', '')">
							<cover-image class="map_search_icon1" :src="apiUrl + 'images/icon/list.png'" @click="goPage('list', '')"></cover-image>
							<cover-view class="map_tab_label text-gray3" @click="goPage('list', '')">列表</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				
				<!--当前点击的标记信息--> 
				<cover-view class="bg-white round-10 fs12 m-t30" v-if="marker">
					<cover-view class="marker">
						<cover-view class="marker_title fs15 fw600"> {{ marker.title }} </cover-view>
						<cover-view class="marker_cont uni-flex justify-space-between">
							<cover-view class="marker_info text-gray9">
								{{ marker.area }}㎡{{ marker.type ? ' | '+marker.type.title : '' }}{{' | ' + ( marker.old_new == 'new' ? '新房装修' : '老房改造')  }}
							</cover-view>
							<cover-view class="marker_view bg-green" @click="goPage('project', marker.id)">查看</cover-view>
						</cover-view>
						<cover-view class="cover_label bg-blue text-white fs10 round-10">{{ marker.project }}</cover-view>
					</cover-view>
				</cover-view>
			</cover-view> 
		</template>
		
		<view class="tab1" v-if="tabIndex == 1"><!--总裁巡查-->
			<noempty v-if="presidentList.length == 0"></noempty>
			<view class="m-30" v-else>
				<view class="uni-flex justify-space-between m-b20 bg-white p-20" v-for="item in presidentList" @click="goPage('article', item.code)">
					<view class="article_image round-10 overflow_h">
						<image class="article_img w-100n h-100n" :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="article_info text-gray3 w-70 p-l20">
						<view class="article_title fs14 fw600">{{ item.title }}</view>
						<view class="article_icons uni-flex justify-space-between">
							<view class="uni-flex justify-left fs12">
								<uni-icons type="eye" color="#666" size="18"></uni-icons>
								<text class="m-l10 text-gray6">{{ item.view_num }}</text>
							</view>
							<view class="text-gray6">{{ getDate(item.create_time) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { getAddressByLocation } from "@/api/base.js"
import { articleList } from "@/api/article.js"
import { caseCovers } from "@/api/house.js"
import urlConfig from '@/common/config.js'
import moment from 'moment'
let that;
export default {
	data() {
		return {
			apiUrl: urlConfig,
			tabIndex: 0,
			tabList: [
				{value: 0, text: '工地直播'},
				{value: 1, text: '总裁巡查'},
			],
			pages: {
				page: 1,
				size: 10,
				loading: true
			},
			presidentList: [],	//总裁巡查列表
			
			coordinate: {
				latitude: 0,
				longitude: 0,
				covers: "",
				list: "",
				total: 0
			},
			marker: "",		//当前点击的标记
		}
	},
	onLoad(e){
		that = this
		that.code = e.code ? e.code : ""
		that.getCaseCovers()
	},
	methods: {		
		/**
		 * 获取位置
		 */
		getLocation() {
			getAddressByLocation().then(res => {
				if(res) {
					that.$set(that.coordinate, "longitude", res.longitude)
					that.$set(that.coordinate, "latitude", res.latitude)
				}
			})
		},
		tabResult(index){
			this.tabIndex = index
			if(index == 1 && that.presidentList.length == 0) {
				that.getArticleList()
			}
		},
		/**
		 * 标记点击
		 */
		markerClick(e) {
			let markerId = e.detail.markerId
			that.marker = that.coordinate.list.find(e => e.id == markerId)
		},
		/**
		 * 工地直播坐标
		 */
		getCaseCovers(){
			let that = this
			caseCovers().then(res => {
				that.coordinate = res.data
				// that.getLocation()
			})
		},
		/**
		 * 根据分类获取文章列表
		 */
		getArticleList() {
			if(!that.pages.loading) return
			that.pages.loading = false
			articleList({
				page: that.pages.page,
				size: that.pages.size,
				order: "sort asc",
				condition: {
					state: 1,
					cate_code: "president"
				}				
			}).then(res => {				
				that.pages.loading = true
				let data = res.data
				let list = [];
				if(that.pages.page == 1) list = data.list;
				else list = [...that.presidentList, ...data.list];
				that.presidentList = list
			})
		},
		goPage(type, content) {
			let url = ''
			if(type == "list") {
				url = `/pages/near/index`
				
			}else if(type == "project") {
				url = `/pages/near/detail?id=${content}`
				
			}else {
				url = `/pages/article/info?code=${content}`
			}
			uni.navigateTo({
				url: url
			})
		},
		getDate(date) {
			return date.split(" ")[0]
		}
	},
}
</script>

<style>
.container {
	height: 100vh;
}
.map_cont {
	position: relative;
	z-index: 1;
	width: 100%; 
	height: 95vh;
}
.cover_header {
	position: fixed;
	z-index: 100;
	left: 5%;
	width: 90%;	
	/* #ifndef APP-NVUE */
	top: 7%;
	/* #endif */
	/* #ifdef APP */
	top: 2%;
	/* #endif */
}
.map_search {
	width: 100%;
	border-radius: 20px;
	height: 35px;
	line-height: 35px;
	background-color: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);	
}
.map_search_icon {
	width: 16px;
	height: 16px;
	margin: 9.5px 12px;
}
.map_search_icon1 {
	width: 16px;
	height: 16px;
	margin: 7px 0 7px 12px;	
}
.map_search_input {
	line-height: 35px;	
}
.map_search_btn {
	width: 60px;
	right: 0;
	top: 0;
	line-height: 35px;
	text-align: center;
	position: absolute;
}
.cover_footer {
	position: fixed;
	z-index: 100;
	width: 90%;
	left: 5%;
	/* #ifndef APP-NVUE */
	bottom: 10px;
	/* #endif */
	/* #ifdef APP */
	bottom: 90px;
	/* #endif */
}
.map_tab , .total {
	width: 146px;
	height: 30px;
	line-height: 30px;
	border-radius: 50px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.total {
	width: 160px;
}
.map_tab {
	right: 0;
}
.map_tab_item {
	width: 50%;
	height: 30px;
	line-height: 30px;
}
.map_tab_label {
	margin-left: 4rpx;
	height: 30px;
	line-height: 30px;
}
.cover_label {
	width: 60px;
	padding: 0 5px;
	text-align: center;
	height: 18px;
	line-height: 18px;
	display: inline-block;
}
.marker {
	width: 94%;
	padding: 15px 3%;
	display: inline-block;
	background-color: #fff;
}
.marker_info {
	line-height: 40px;
}
.marker_view {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
}

</style>